<template>
    <view class="bodys">
        <view class="justView"> </view>
        <view class="con">
            <view class="recordCon" v-for="(item,index) in dataList" :key="index">
                <view class="contain" @click="goIndex(item)">
                    <view class="productName" @click.stop="editName(item)">
                        <p>
                            <u-button color="#5079ed" style="font-size: 30rpx;" size="mini" :plain="false"
                                shape="circle">{{item.productName}}</u-button>
                        </p>
                        <p>
                            <u-button shape="circle" style="font-size: 30rpx;" size="mini" type="primary" :plain="true"
                                text="编辑名称"></u-button>
                        </p>
                    </view>
                    <view class="comboNo">
                        设备号：{{item.snCode}}
                    </view>
                    <view class="des">
                        用户号：{{item.merchantNo}}
                    </view>
                    <view class="des">
                        设备备注：{{item.notes}}
                    </view>
                    <view class="des">
                        添加时间：{{item.time}}
                    </view>
                </view>
            </view>
        </view>

        <view>
            <u-modal :show="show" productName="修改备注名称" @confirm="confirm()" @cancel="cancel()"
                :showCancelButton="isShow" cancelText="取消">

                <u--input placeholder="请输入设备名称" border="surround" v-model="editValue"></u--input>
            </u-modal>

        </view>



        <view class="list_foot ">
            <view class="no_more" v-if="loadingType == 'nomore'&& dataList.length && !isLoading">
                <text class="line"></text>
                <text class="text">暂无更多数据</text>
                <text class="line"></text>
            </view>

            <view class="no_data" v-if="dataList.length==0 && !isLoading">
                <text class="line"></text>
                <text class="text">暂无数据</text>
                <text class="line"></text>
            </view>
        </view>
        <view class="flex-center-center bottoms" @click="goNewUesr()">
            <u-icon name="plus" color="#527bed" /> 添加新设备
        </view>

    </view>
</template>

<script>
    import {
        deviceList,
        setName,
        defaultStatus
    } from '@/common/api.js'
    import util from '@/common/utils'
    export default {
        data() {
            return {
                isLoading: false,
                params: {
                    "pageNum": 1,
                    "pageSize": 20,
                },
                setName: {
                    id: '',
                    name: ''
                },
                loadingType: 'more',
                show: false,
                isShow: true,
                editValue: '',
                dataList: [
                    //     {
                    //     time: '2024-10-08 17:10:57',
                    //     snCode: '6822432253211',
                    //     notes: '李果',
                    //     merchantNo: '6862325222222',
                    //     isState: '1',
                    //     productName: '充电宝MIFI2'
                    // }, {
                    //     time: '2024-10-08 17:10:57',
                    //     snCode: '6822432253211',
                    //     notes: '东来',
                    //     merchantNo: '6862325222222',
                    //     isState: '2',
                    //     productName: '充电宝WIFI1'
                    // }, 
                ]
            }
        },

        onLoad() {
            this.getData()

        },

        // 下拉刷新
        onPullDownRefresh() {
            this.params.pageNum = 1;
            this.dataList = [];
            this.getData('refresh');
        },
        // 加载更多
        onReachBottom() {
            if (this.loadingType === 'nomore' || this.dataList.length === 0) return;
            this.params.pageNum++;
            this.getData();
        },

        methods: {
            getData(type) {
                if (this.isLoading) return;
                this.isLoading = true;
                deviceList(this.params).then((res) => {
                    if (type === 'refresh') {
                        this.dataList = []
                        uni.stopPullDownRefresh();
                    }
                    this.isLoading = false;
                    this.dataList = res.data.content
                    const dataList = res.data.content

                    if (dataList.length === this.params.pageSize && this.params.pageNum != res.data
                        .totalPages) {
                        this.loadingType = 'more'
                    } else {
                        this.loadingType = 'nomore'
                    }
                    // this.loadingType = dataList.length === this.params.pageSize ? 'more' : 'nomore';
                    if (this.params.pageNum == 1) {
                        this.dataList = dataList;
                    } else {
                        this.dataList = [...this.dataList, ...dataList];
                    }


                }).catch(e => {
                    this.isLoading = false;
                    uni.stopPullDownRefresh();
                });
            },
            editName(item) {
                this.setName.name = this.editValue = item.notes
                this.setName.id = item.id
                this.show = true
            },

            confirm() {
                this.cancel()
                this.setName.name = this.editValue
                setName(this.setName).then((res) => {
                    if (res.status === 200 || res.status === 0) {
                        this.getData();
                        this.$u.toast('修改成功')
                    }

                })


            },

            cancel() {
                this.show = false
            },
            goNewUesr() {
                uni.navigateTo({
                    url: '/pages/login/register2'
                })
            },
            goIndex(item) {
                uni.setStorageSync('merchantId', item.id);
                uni.reLaunch({
                    url: `/pages/index/index?merchantId=${item.id}`
                })
                defaultStatus(item.id).then((res) => {}).catch(e => {});
            }
        }
    }
</script>

<style lang="scss" scoped>
    .bodys {
        background-color: #f7f8fa;
        min-height: 100%;
        width: 100%;
        position: relative;
        min-height: 100vh;
        box-sizing: border-box;

        .con {
            padding-bottom: 100rpx;
        }

        .justView {
            height: 5rpx;
            width: 100%;
            background-color: #f7f8fa;
        }

        .bottoms {
            height: 100rpx;
            width: 100%;
            position: absolute;
            bottom: 80rpx;
            color: #527bed;
            z-index: 1;
        }

        .seleBtn {
            height: 100rpx;
            display: flex;
            align-items: center;
            width: 95%;
            margin-left: 3%;
            margin-bottom: -20rpx;

            .btn {
                height: 60rpx;
                text-align: center;
                line-height: 60rpx;
                font-size: 28rpx;
                width: 200rpx;
                background-color: #e6ebf9;
                color: #527bed;
                border-radius: 50rpx;
                border: 1px solid #527bed;
                display: flex;
                justify-content: center;
            }
        }

        .recordCon {
            height: 300rpx;
            width: 100%;
            display: flex;
            align-items: center;
            width: 95%;
            margin-left: 2.5%;
            margin-top: 25rpx;
            background-color: #fff;
            border-radius: 10rpx;

            .contain {
                width: 92%;
                margin-left: 4%;
                background-image: url("../../../static/icon/p_038.png");
                background-repeat: no-repeat;
                background-size: 30%;
                /* background-position: top right; */
                // background-position: 250px 10rpx;
            }

            .comboNo {
                margin-top: 20rpx;
            }

            .productName {
                display: flex;
                justify-content: space-between;
            }

            .des {
                color: #999;
                margin-top: 5rpx;
                font-size: 28rpx;
            }
        }
    }
</style>